<template>
  <div class="screen">
    <div class="screen-one">
      <div class="screen-one-text">
        <div class="screen-one-projuct-text">
          项目
        </div>
        <div
          class="screen-one-all-text"
          :class="{'active':active==='全部'}"
          @click="onefilterAll"
        >
          全部
        </div>
      </div>
      <div class="screen-one-wrap">
        <div
          v-for="item in oneData"
          :key="item.class_id"
          class="screen-one-item"
          :class="{'active':active===item.class_name}"
          @click="onefilter(item)"
        >
          {{ item.class_name }}
        </div>
      </div>
    </div>
    <div v-if="twoisfalse" class="screen-two">
      <div class="screen-two-text">
        <div class="screen-two-projuct-text">
          二级
        </div>

        <div
          class="screen-two-all-text"
          :class="{'active':active2==='全部'}"
          @click="twofilterAll"
        >
          全部
        </div>
      </div>
      <div class="screen-two-wrap">
        <div
          v-for="item in twoData"
          :key="item.class_id"
          class="screen-two-item"
          :class="{'active2':active2===item.class_name}"
          @click="twofilter(item)"
        >
          {{ item.class_name }}
        </div>
      </div>
    </div>
    <div v-if="threeisfalse" class="screen-three">
      <div class="screen-three-text">
        <div class="screen-three-projuct-text">
          三级
        </div>

        <div
          class="screen-three-all-text"
          :class="{'active':active3==='全部'}"
          @click="threefilterAll"
        >
          全部
        </div>
      </div>
      <div class="screen-three-wrap">
        <div
          v-for="item in threeData"
          :key="item.class_id"
          class="screen-three-item"
          :class="{'active3':active3===item.project_name}"
          @click="threefilter(item)"
        >
          {{ item.project_name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getScreenTwo, getScreenOne } from '@/api/screen.js'
export default {
  components: {

  },
  data() {
    return {
      active: '全部',
      active2: '全部',
      active3: '全部',
      oneData: [],
      twoData: [],
      threeData: [],
      twoisfalse: false,
      threeisfalse: false,
      oneid: '',
      onename: '',
      twoname: '',
      twoid: ''
    }
  },
  computed: {

  },
  created() {
    getScreenOne(1).then((res) => {
      this.oneData = res.data
    })
  },
  mounted() {

  },
  methods: {
    onefilter(i) {
      this.active = i.class_name
      this.twoisfalse = true
      this.oneid = i.class_id
      this.onename = i.class_name
      this.$emit('classId', { id: this.oneid, name: this.onename })
      if (this.threeisfalse) {
        this.threeisfalse = false
      }
      getScreenTwo(i.class_id).then(res => {
        this.twoData = res.data
      })
    },
    twofilter(i) {
      this.active2 = i.class_name
      this.threeisfalse = true
      this.twoid = i.class_id
      this.twoname = i.class_name
      this.$emit('classId', { id: this.twoid, name: this.twoname })
      getScreenTwo(i.class_id).then(res => {
        this.threeData = res.data
      })
    },
    threefilter(i) {
      this.$emit('classId', { id: i.project_id, name: i.project_name })
      this.active3 = i.project_name
    },
    onefilterAll() {
      this.active = '全部'
      this.twoisfalse = false
      this.threeisfalse = false
      this.$emit('classId', '')
    },
    twofilterAll() {
      this.active2 = '全部'
      this.threeisfalse = false
      this.$emit('classId', { id: this.oneid, name: this.onename })
    },
    threefilterAll() {
      this.active3 = '全部'
      this.$emit('classId', { id: this.twoid, name: this.twoname })
    }
  }
}
</script>
<style scoped lang="scss">
.screen {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
   -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  .screen-one {
    width: 100%;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    display: flex;
    padding-bottom: 15px;
    position: relative;
    .screen-one-text {
      font-size: 14px;

      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
      display: flex;
      .screen-one-projuct-text{
        width: 88px;
        height: 50px;
        text-align: center;
        line-height: 50px;
      }
      .screen-one-all-text {
        margin-left: 30px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        position: absolute;
        left: 58px;
        top: 15px;
      }
      .screen-one-all-text:hover {
        cursor: pointer;
      }
    }

    .screen-one-wrap {
      width: 1074px;
      display: flex;
      flex-wrap: wrap;
      margin-left: 27px;
    }
    .screen-one-item {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-left: 30px;
      margin-top: 15px;
    }
    .screen-one-item:hover {
      cursor: pointer;
    }
  }
}

.screen-two {
  width: 100%;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
  display: flex;
  padding-bottom: 15px;
  position: relative;
  .screen-two-text {
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    display: flex;
    .screen-two-projuct-text {
      width: 88px;
      text-align: center;
      line-height: 50px;
    }
    .screen-two-all-text {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      left: 88px;
      top: 15px;
    }
    .screen-two-all-text:hover {
      cursor: pointer;
    }
  }
  .screen-two-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: 27px;
  }
  .screen-two-item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 15px;
    margin-left: 30px;
  }
  .screen-two-item:hover {
    cursor: pointer;
  }
}

.screen-three {
  width: 100%;
  display: flex;
  padding-bottom: 15px;
  position: relative;
  .screen-three-text {
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    display: flex;
    .screen-three-projuct-text {
      width: 88px;
      text-align: center;
      line-height: 50px;
    }
    .screen-three-all-text {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      left: 88px;
      top: 15px;
    }
    .screen-three-all-text:hover {
      cursor: pointer;
    }
  }
  .screen-three-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: 27px;
  }
  .screen-three-item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 15px;
    margin-left: 30px;
  }
  .screen-three-item:hover {
    cursor: pointer;
  }
}
.active {
  color: rgba(80, 76, 255, 1) !important;
}
.active2 {
  color: rgba(80, 76, 255, 1) !important;
}
.active3{
  color: rgba(80, 76, 255, 1) !important;
}
</style>
